<template>
    <div class="container">
      <header>
        <h1><i class="fas fa-tasks"></i> 待办事项</h1>
        <p>高效管理您的待办事项，轻松跟踪任务进度，提升工作效率</p>
      </header>
      
      <div class="dashboard">
        <Sidebar />
        
        <div class="main-content">
          <div class="tasks-header">
            <h2><i class="fas fa-list-check"></i> 任务列表</h2>
            <div class="task-actions">
              <button class="btn btn-outline">
                <i class="fas fa-sort"></i> 排序
              </button>
              <button class="btn btn-primary" @click="showTaskForm">
                <i class="fas fa-plus"></i> 添加任务
              </button>
            </div>
          </div>
          
          <div class="tasks-container">
            <TaskForm />
            
            <div class="tasks-list">
              <TaskCard 
                v-for="task in filteredTasks" 
                :key="task.id" 
                :task="task" 
              />
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <p>© 2025 智能任务管理系统 | 高效管理您的每一天</p>
        <p>copyright@ylq</p>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useTaskStore } from '../stores/taskStore'
  import Sidebar from '../components/Sidebar.vue'
  import TaskForm from '../components/TaskForm.vue'
  import TaskCard from '../components/TaskCard.vue'
  
  const taskStore = useTaskStore()
  const filteredTasks = computed(() => taskStore.filteredTasks)
  
  function showTaskForm() {
    taskStore.showTaskForm = true
    taskStore.editingTask = null
  }
  </script>